import React from 'react';
import { connect } from 'dva';
import { Router, Route, Link } from 'dva/router';
import { Layout, Menu, Icon, Avatar, Dropdown, Popover, Button } from 'antd';
import EchartPage from './Echart/EchartPage.jsx';
import AveragePage from './Echart/AveragePage.jsx';
import MaximumPage from './Echart/MaximumPage';
import AutomaticPage from './Echart/AutomaticPage';
import VariancePage from './Echart/VariancePage';
import InterceptPage from './Echart/InterceptPage';
import MaxCompressPage from './Echart/MaxCompressPage';
import MinCompressPage from './Echart/MinCompressPage';
import AveragePageY from './Echart/AveragePageY';
import RelevantPage from './Echart/RelevantPage';

import User from './UserPage/User';
import UserInfoPage from './UserInfoPage';

// function Indexpage({ dispatch, collapsed, menu, loginInfo, loginLogo, updateInfo }) {
class IndexPage extends React.Component {
	logout = () => {
		const { dispatch } = this.props;

		dispatch({
			type: 'indexpage/gologin',
			payload: {}
		});
		// sessionStorage.clear();
	};
	toggle = () => {
		const { dispatch, collapsed } = this.props;
		dispatch({
			type: 'indexpage/setState',
			payload: {
				collapsed: !collapsed
			}
		});
	};

	showDrawer = () => {
		const { dispatch } = this.props;
		dispatch({
			type: 'indexpage/setState',
			payload: {
				DrawerVisible: true
			}
		});
	};

	render() {
		const { dispatch, collapsed, menu, loginInfo, loginLogo, updateInfo, username, vip, avater } = this.props;
		const { Header, Sider, Content, Footer } = Layout;
		const SubMenu = Menu.SubMenu;
		const loginmenu = (
			<Menu>
				<Menu.Item key={1}>
					<a onClick={this.showDrawer}>个人信息</a>
				</Menu.Item>
				<Menu.Item key={2}>
					<a onClick={this.logout}>退出登录</a>
				</Menu.Item>
			</Menu>
		);

		return (
			<Layout style={{ height: '100%' }}>
				<UserInfoPage />
				<Sider
					trigger={null}
					collapsible
					collapsed={collapsed}
					theme="dark"
					style={{ height: '100%' }}
					width={300}
				>
					<div className="logo">
						<img
							src=""
							alt=""
							style={{
								marginLeft: 12,
								display: 'inline-block',
								height: 50,
								marginTop: 5
							}}
						/>
						<h1
							style={{
								marginLeft: 12,
								color: 'white',
								display: 'inline-block',
								fontWeight: 600,
								fontSize: 25,
								verticalAlign: 'middle',
								marginTop: 10
							}}
						>
							密码功耗分析系统
						</h1>
					</div>
					<Menu theme="dark" mode="inline" defaultSelectedKeys={[ '1' ]} style={{ marginTop: 10 }}>
						<SubMenu
							key="sub1"
							title={
								<span style={{ fontSize: 17 }}>
									<Icon type="user" />
									<span>后台管理</span>
								</span>
							}
						>
							<Menu.Item key="userInfo">
								用户
								<Link to="/indexpage/User" />
							</Menu.Item>
						</SubMenu>
						<SubMenu
							key="sub2"
							title={
								<span style={{ fontSize: 17 }}>
									<Icon type="bar-chart" />
									<span>数据展示</span>
								</span>
							}
						>
							<Menu.Item key="echart">
								数据总览
								<Link to="/indexpage/EchartPage" />
							</Menu.Item>
							{vip ? (
								<Menu.Item key="7">
									平均
									<Link to="/indexpage/AveragePage" />
								</Menu.Item>
							) : (
								<Menu.Item key="7" disabled>
									平均(会员功能)
								</Menu.Item>
							)}
							{vip ? (
								<Menu.Item key="8">
									方差
									<Link to="/indexpage/VariancePage" />
								</Menu.Item>
							) : (
								<Menu.Item key="8" disabled>
									方差(会员功能)
								</Menu.Item>
							)}
							{vip ? (
								<Menu.Item key="9">
									数据自动轮播
									<Link to="/indexpage/automaticpage" />
								</Menu.Item>
							) : (
								<Menu.Item key="9" disabled>
									数据自动轮播(会员功能)
								</Menu.Item>
							)}
							{vip ? (
								<Menu.Item key="10">
									最值
									<Link to="/indexpage/MaximumPage" />
								</Menu.Item>
							) : (
								<Menu.Item key="10" disabled>
									最值(会员功能)
								</Menu.Item>
							)}
							{vip ? (
								<Menu.Item key="11">
									截取
									<Link to="/indexpage/InterceptPage" />
								</Menu.Item>
							) : (
								<Menu.Item key="11" disabled>
									截取(会员功能)
								</Menu.Item>
							)}
							{vip ? (
								<Menu.Item key="12">
									最大值压缩
									<Link to="/indexpage/MaxCompressPage" />
								</Menu.Item>
							) : (
								<Menu.Item key="12" disabled>
									最大值压缩(会员功能)
								</Menu.Item>
							)}
							{vip ? (
								<Menu.Item key="13">
									最小值压缩
									<Link to="/indexpage/MinCompressPage" />
								</Menu.Item>
							) : (
								<Menu.Item key="13" disabled>
									最小值压缩(会员功能)
								</Menu.Item>
							)}
							{vip ? (
								<Menu.Item key="14">
									垂直平均值
									<Link to="/indexpage/AveragePageY" />
								</Menu.Item>
							) : (
								<Menu.Item key="14" disabled>
									垂直平均值(会员功能)
								</Menu.Item>
							)}
							{vip ? (
								<Menu.Item key="15">
									相关系数
									<Link to="/indexpage/RelevantPage" />
								</Menu.Item>
							) : (
								<Menu.Item key="15" disabled>
									相关系数(会员功能)
								</Menu.Item>
							)}
						</SubMenu>
					</Menu>
				</Sider>
				<Layout style={{ minHeight: 900 }}>
					<Header style={{ background: '#fff', padding: 0 }}>
						<Icon
							className="trigger"
							type={collapsed ? 'menu-unfold' : 'menu-fold'}
							onClick={this.toggle}
							style={{ fontSize: '18px', lineHeight: '40px', padding: '0 16px' }}
						/>
						<div style={{ display: 'inline-block', float: 'right' }}>
							{avater ? (
								<img
									src={require('../assets/' + avater)}
									style={{ width: 42, height: 35, marginRight: 10 }}
								/>
							) : (
								<Avatar
									style={{ backgroundColor: '#87d068' }}
									icon="user"
									style={{ display: 'inline-block', marginRight: 10 }}
								/>
							)}
							<Dropdown overlay={loginmenu}>
								<a className="ant-dropdown-link" style={{ marginRight: 70 }}>
									{username}
									<Icon type="down" />
								</a>
							</Dropdown>,
						</div>
					</Header>
					<Content
						style={{
							overflow: 'scroll',
							margin: '14px 16px',
							marginBottom: 0,
							padding: 14,
							background: '#fff',
							minHeight: 450
						}}
					>
						<div
							style={{
								height: '100%'
							}}
						>
							{/* <Route path="/indexpage/UserInfoPage" component={UserInfoPage} /> */}
							<Route path="/indexpage/echartpage" component={EchartPage} />
							<Route path="/indexpage/user" component={User} />
							<Route path="/indexpage/automaticpage" component={AutomaticPage} />
							<Route path="/indexpage/AveragePage" component={AveragePage} />
							<Route path="/indexpage/MaximumPage" component={MaximumPage} />
							<Route path="/indexpage/VariancePage" component={VariancePage} />
							<Route path="/indexpage/InterceptPage" component={InterceptPage} />
							<Route path="/indexpage/MaxCompressPage" component={MaxCompressPage} />
							<Route path="/indexpage/MinCompressPage" component={MinCompressPage} />
							<Route path="/indexpage/AveragePageY" component={AveragePageY} />
							<Route path="/indexpage/RelevantPage" component={RelevantPage} />
							
						</div>
					</Content>
					<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
				</Layout>
			</Layout>
		);
	}
}

export default connect(({ indexpage }) => ({ ...indexpage }))(IndexPage);
